<%@ page import="com.movies.service.MovieServiceImpl" %>
<%@ page import="java.util.List" %>
<%@ page import="com.movies.pojo.Cinema" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/7/3
  Time: 10:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>电影院</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href='http://fonts.useso.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
    <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
    <link href="css/gozha-nav.css" rel="stylesheet" />
    <link href="css/external/jquery.selectbox.css" rel="stylesheet" />
    <link href="css/external/idangerous.swiper.css" rel="stylesheet" />
    <link href="css/style.css?v=1" rel="stylesheet" />
    <script src="js/external/modernizr.custom.js"></script>
</head>
<body> <div class="wrapper">
    <!-- 头部导航栏-->
    <hearder>
        <jsp:include page="header.jsp"></jsp:include>
    </hearder>
    <!-- 搜索框-->
    <jsp:include page="search.jsp"></jsp:include>


    <!-- Main content -->
    <section class="cinema-container">
        <div class="cinema cinema--full">
            <%
                MovieServiceImpl msi = new MovieServiceImpl();
                List<Cinema> list = msi.queryCinema(400);
                for(Cinema cin : list){
            %>
            <p class="cinema__title"><%=cin.getBrandName()%></p>
            <div class="cinema__rating">5.0</div>
            <div class="cinema__gallery">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <!--First Slide-->
                        <div class="swiper-slide">
                            <img alt='' src="http://placehold.it/380x380">
                        </div>

                        <!--Second Slide-->
                        <div class="swiper-slide">
                            <img alt='' src="http://placehold.it/380x380">
                        </div>

                        <!--Third Slide-->
                        <div class="swiper-slide">
                            <img alt='' src="http://placehold.it/380x380">
                        </div>

                        <!--Four Slide-->
                        <div class="swiper-slide">
                            <img alt='' src="http://placehold.it/380x380">
                        </div>

                        <!--Five Slide-->
                        <div class="swiper-slide">
                            <img alt='' src="http://placehold.it/380x380">
                        </div>

                        <!--Six Slide-->
                        <div class="swiper-slide">
                            <img alt='' src="http://placehold.it/380x380">
                        </div>

                        <!--Seven Slide-->
                        <div class="swiper-slide">
                            <img alt='' src="http://placehold.it/380x380">
                        </div>

                        <!--Eight Slide-->
                        <div class="swiper-slide">
                            <img alt='' src="http://placehold.it/380x380">
                        </div>

                        <!--Nine Slide-->
                        <div class="swiper-slide">
                            <img alt='' src="http://placehold.it/380x380">
                        </div>

                    </div>
                </div>
            </div>
            <div class="cinema__info" >

                <p class="cinema__info-item"><strong>地址:</strong><%=cin.getAddress()%></p>
                <p class="cinema__info-item"><strong>电话:</strong><%=cin.getPhone()%></p>
                <p class="cinema__info-item"><strong>服务:</strong><%=cin.getServer()%><a href="#"></a></p>
                <%}%>
                <table >
                    <tr>
                        <td class="cinema__info-item">地址：</td>
                        <td class="cinema__info-item">电话：</td>
                        <td class="cinema__info-item">服务：</td>
                    </tr>
                    <tbody id="cinema__info">
                    </tbody>
                </table>
            </div>
        </div>

        <div class="share share--centered">
            <div class="addthis_toolbox addthis_default_style ">
                <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
                <a class="addthis_button_tweet"></a>
                <a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
            </div>
        </div>

        <div class="tabs tabs--horisontal">
            <!-- Nav tabs -->
            <div class="container">
                <ul class="nav nav-tabs" id="hTab">
                    <li><a href="#movie1" data-toggle="tab">电影</a></li>
                    <li><a href="#comment1" data-toggle="tab">意见</a></li>
                    <li class="active"><a href="#map1" data-toggle="tab">地图</a></li>
                </ul>
            </div>

            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane" id="movie1">
                    <div class="container">
                        <div class="movie-time-wrap">

                            <div class="datepicker">
                                <span class="datepicker__marker"><i class="fa fa-calendar"></i>Date</span>
                                <input type="text" id="datepicker" value='03/10/2014' class="datepicker__input">
                            </div>

                            <div class="clearfix"></div>

                            <div class="col-sm-6">

                                <!-- Movie variant with time -->
                                <div class="movie movie--time">
                                    <div class="row">
                                        <div class="col-sm-6 col-md-5">
                                            <div class="movie__images">
                                                <span class="movie__rating">4.1</span>
                                                <img alt='' src="http://placehold.it/424x424">
                                            </div>
                                        </div>

                                        <div class="col-sm-6 col-md-7">
                                            <a href='movie-page-left.html' class="movie__title">Gravity (2013) </a>

                                            <p class="movie__time">91 min</p>

                                            <p class="movie__option"><a href="#">Drama</a> | <a href="#">Sci-Fi</a> | <a href="#">Thriller</a></p>
                                        </div>
                                        <div class="time-select">
                                            <ul class="items-wrap">
                                                <li class="time-select__item" data-time='09:40'>09:40</li>
                                                <li class="time-select__item" data-time='13:45'>13:45</li>
                                                <li class="time-select__item" data-time='15:45'>15:45</li>
                                                <li class="time-select__item" data-time='19:50'>19:50</li>
                                                <li class="time-select__item" data-time='21:50'>21:50</li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                                <!-- Movie variant with time -->
                            </div>

                            <div class="col-sm-6">

                                <!-- Movie variant with time -->
                                <div class="movie movie--time">
                                    <div class="row">
                                        <div class="col-sm-6 col-md-5">
                                            <div class="movie__images">
                                                <span class="movie__rating">5.0</span>
                                                <img alt='' src="http://placehold.it/424x424">
                                            </div>
                                        </div>

                                        <div class="col-sm-6 col-md-7">
                                            <a href='movie-page-left.html' class="movie__title">The Hobbit:  The Desolation of Smaug (2013) </a>

                                            <p class="movie__time">169 min</p>

                                            <p class="movie__option"><a href="#">Adventure</a> | <a href="#">Fantazy</a> | <a href="#">Drama</a></p>
                                        </div>

                                        <div class="time-select">
                                            <ul class="items-wrap">
                                                <li class="time-select__item" data-time='09:40'>09:40</li>
                                                <li class="time-select__item" data-time='13:45'>13:45</li>
                                                <li class="time-select__item" data-time='15:45'>15:45</li>
                                                <li class="time-select__item" data-time='19:50'>19:50</li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                                <!-- Movie variant with time -->
                            </div>

                            <div class="clearfix"></div>

                            <div class="col-sm-6">

                                <!-- Movie variant with time -->
                                <div class="movie movie--time">
                                    <div class="row">
                                        <div class="col-sm-6 col-md-5">
                                            <div class="movie__images">
                                                <span class="movie__rating">4.9</span>
                                                <img alt='' src="http://placehold.it/424x424">
                                            </div>
                                        </div>

                                        <div class="col-sm-6 col-md-7">
                                            <a href='movie-page-left.html' class="movie__title">The Hunger Games:  Catching Fire (2013)</a>

                                            <p class="movie__time">149 min</p>

                                            <p class="movie__option"><a href="#">Adventure</a> | <a href="#">Action</a> | <a href="#">Sci-Fi</a></p>
                                        </div>

                                        <div class="time-select">
                                            <ul class="items-wrap">
                                                <li class="time-select__item" data-time='09:40'>09:40</li>
                                                <li class="time-select__item" data-time='13:45'>13:45</li>
                                                <li class="time-select__item" data-time='15:45'>15:45</li>
                                                <li class="time-select__item" data-time='19:50'>19:50</li>
                                                <li class="time-select__item" data-time='21:50'>21:50</li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                                <!-- Movie variant with time -->
                            </div>

                            <div class="col-sm-6">

                                <!-- Movie variant with time -->
                                <div class="movie movie--time">
                                    <div class="row">
                                        <div class="col-sm-6 col-md-5">
                                            <div class="movie__images">
                                                <span class="movie__rating">4.9</span>
                                                <img alt='' src="http://placehold.it/424x424">
                                            </div>
                                        </div>

                                        <div class="col-sm-6 col-md-7">
                                            <a href='movie-page-left.html' class="movie__title">Thor: The Dark World  (2013) </a>

                                            <p class="movie__time">112 min</p>

                                            <p class="movie__option"><a href="#">Action</a> | <a href="#">Adventure</a> | <a href="#">Fantazy</a></p>
                                        </div>

                                        <div class="time-select">
                                            <ul class="items-wrap">
                                                <li class="time-select__item" data-time='09:40'>09:40</li>
                                                <li class="time-select__item" data-time='13:45'>13:45</li>
                                                <li class="time-select__item" data-time='15:45'>15:45</li>
                                                <li class="time-select__item" data-time='19:50'>19:50</li>
                                                <li class="time-select__item" data-time='21:50'>21:50</li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                                <!-- Movie variant with time -->
                            </div>

                            <div class="clearfix"></div>

                            <div class="col-sm-6">

                                <!-- Movie variant with time -->
                                <div class="movie movie--time">
                                    <div class="row">
                                        <div class="col-sm-6 col-md-5">
                                            <div class="movie__images">
                                                <span class="movie__rating">4.1</span>
                                                <img alt='' src="http://placehold.it/424x424">
                                            </div>
                                        </div>

                                        <div class="col-sm-6 col-md-7">
                                            <a href='movie-page-left.html' class="movie__title">World War Z (2013) </a>

                                            <p class="movie__time">116 min</p>

                                            <p class="movie__option"><a href="#">Adventure</a> | <a href="#">Horror</a> | <a href="#">Action</a></p>
                                        </div>

                                        <div class="time-select">
                                            <ul class="items-wrap">
                                                <li class="time-select__item" data-time='09:40'>09:40</li>
                                                <li class="time-select__item" data-time='13:45'>13:45</li>
                                                <li class="time-select__item" data-time='15:45'>15:45</li>
                                                <li class="time-select__item" data-time='19:50'>19:50</li>
                                                <li class="time-select__item" data-time='21:50'>21:50</li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                                <!-- Movie variant with time -->
                            </div>

                            <div class="col-sm-6">

                                <!-- Movie variant with time -->
                                <div class="movie movie--time">
                                    <div class="row">
                                        <div class="col-sm-6 col-md-5">
                                            <div class="movie__images">
                                                <span class="movie__rating">4.9</span>
                                                <img alt='' src="http://placehold.it/424x424">
                                            </div>
                                        </div>

                                        <div class="col-sm-6 col-md-7">
                                            <a href='movie-page-left.html' class="movie__title">Prisoners (2013) </a>

                                            <p class="movie__time">153 min</p>

                                            <p class="movie__option"><a href="#">Crime</a> | <a href="#">Thriller</a> | <a href="#">Drama</a></p>
                                        </div>

                                        <div class="time-select">
                                            <ul class="items-wrap">
                                                <li class="time-select__item" data-time='09:40'>09:40</li>
                                                <li class="time-select__item" data-time='13:45'>13:45</li>
                                                <li class="time-select__item" data-time='15:45'>15:45</li>
                                                <li class="time-select__item" data-time='19:50'>19:50</li>
                                                <li class="time-select__item" data-time='21:50'>21:50</li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                                <!-- Movie variant with time -->
                            </div>

                            <div class="clearfix"></div>

                            <div class="col-sm-6">

                                <!-- Movie variant with time -->
                                <div class="movie movie--time">
                                    <div class="row">
                                        <div class="col-sm-6 col-md-5">
                                            <div class="movie__images">
                                                <span class="movie__rating">4.6</span>
                                                <img alt='' src="http://placehold.it/424x424">
                                            </div>
                                        </div>

                                        <div class="col-sm-6 col-md-7">
                                            <a href='movie-page-left.html' class="movie__title">This Is the End (2013)  </a>

                                            <p class="movie__time">107 min</p>

                                            <p class="movie__option"><a href="#">Comedy</a> | <a href="#">Fantazy</a></p>
                                        </div>

                                        <div class="time-select">
                                            <ul class="items-wrap">
                                                <li class="time-select__item" data-time='09:40'>09:40</li>
                                                <li class="time-select__item" data-time='13:45'>13:45</li>
                                                <li class="time-select__item" data-time='15:45'>15:45</li>
                                                <li class="time-select__item" data-time='19:50'>19:50</li>
                                                <li class="time-select__item" data-time='21:50'>21:50</li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                                <!-- Movie variant with time -->
                            </div>

                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="comment1">
                    <div class="container">
                        <div class="comment-wrapper">
                            <form id="comment-form" class="comment-form" method='post'>
                                <textarea class="comment-form__text" placeholder='Add you comment here'></textarea>
                                <label class="comment-form__info">250 characters left</label>
                                <button type='submit' class="btn btn-md btn--danger comment-form__btn">add comment</button>
                            </form>

                            <div class="comment-sets comment--light">

                                <div class="comment">
                                    <div class="comment__images">
                                        <img alt='' src="http://placehold.it/50x50">
                                    </div>

                                    <a href='#' class="comment__author"><span class="social-used fa fa-facebook"></span>Roberta Inetti</a>
                                    <p class="comment__date">today | 03:04</p>
                                    <p class="comment__message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae enim sollicitudin, euismod erat id, fringilla lacus. Cras ut rutrum lectus. Etiam ante justo, volutpat at viverra a, mattis in velit. Morbi molestie rhoncus enim, vitae sagittis dolor tristique et.</p>
                                    <a href='#' class="comment__reply">Reply</a>
                                </div>

                                <div class="comment">
                                    <div class="comment__images">
                                        <img alt='' src="http://placehold.it/50x50">
                                    </div>

                                    <a href='#' class="comment__author"><span class="social-used fa fa-vk"></span>Olia Gozha</a>
                                    <p class="comment__date">22.10.2013 | 14:40</p>
                                    <p class="comment__message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae enim sollicitudin, euismod erat id, fringilla lacus. Cras ut rutrum lectus. Etiam ante justo, volutpat at viverra a, mattis in velit. Morbi molestie rhoncus enim, vitae sagittis dolor tristique et.</p>
                                    <a href='#' class="comment__reply">Reply</a>
                                </div>

                                <div class="comment comment--answer">
                                    <div class="comment__images">
                                        <img alt='' src="http://placehold.it/50x50">
                                    </div>

                                    <a href='#' class="comment__author"><span class="social-used fa fa-vk"></span>Dmitriy Pustovalov</a>
                                    <p class="comment__date">today | 10:19</p>
                                    <p class="comment__message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae enim sollicitudin, euismod erat id, fringilla lacus. Cras ut rutrum lectus. Etiam ante justo, volutpat at viverra a, mattis in velit. Morbi molestie rhoncus enim, vitae sagittis dolor tristique et.</p>
                                    <a href='#' class="comment__reply">Reply</a>
                                </div>

                                <div class="comment comment--last">
                                    <div class="comment__images">
                                        <img alt='' src="http://placehold.it/50x50">
                                    </div>

                                    <a href='#' class="comment__author"><span class="social-used fa fa-facebook"></span>Sia Andrews</a>
                                    <p class="comment__date"> 22.10.2013 | 12:31 </p>
                                    <p class="comment__message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae enim sollicitudin, euismod erat id, fringilla lacus. Cras ut rutrum lectus. Etiam ante justo, volutpat at viverra a, mattis in velit. Morbi molestie rhoncus enim, vitae sagittis dolor tristique et.</p>
                                    <a href='#' class="comment__reply">Reply</a>
                                </div>

                                <div id='hide-comments' class="hide-comments">
                                    <div class="comment">
                                        <div class="comment__images">
                                            <img alt='' src="http://placehold.it/50x50">
                                        </div>

                                        <a href='#' class="comment__author"><span class="social-used fa fa-facebook"></span>Roberta Inetti</a>
                                        <p class="comment__date">today | 03:04</p>
                                        <p class="comment__message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae enim sollicitudin, euismod erat id, fringilla lacus. Cras ut rutrum lectus. Etiam ante justo, volutpat at viverra a, mattis in velit. Morbi molestie rhoncus enim, vitae sagittis dolor tristique et.</p>
                                        <a href='#' class="comment__reply">Reply</a>
                                    </div>

                                    <div class="comment">
                                        <div class="comment__images">
                                            <img alt='' src="http://placehold.it/50x50">
                                        </div>

                                        <a href='#' class="comment__author"><span class="social-used fa fa-vk"></span>Olia Gozha</a>
                                        <p class="comment__date">22.10.2013 | 14:40</p>
                                        <p class="comment__message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae enim sollicitudin, euismod erat id, fringilla lacus. Cras ut rutrum lectus. Etiam ante justo, volutpat at viverra a, mattis in velit. Morbi molestie rhoncus enim, vitae sagittis dolor tristique et.</p>
                                        <a href='#' class="comment__reply">Reply</a>
                                    </div>
                                </div>

                                <div class="comment-more">
                                    <a href="#" class="watchlist">Show more comments</a>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane active" id="map1">
                    <div id='cinema-map' class="map"></div>
                </div>
            </div>
        </div>

    </section>

    <!-- 底部-->
    <jsp:include page="footer.jsp"></jsp:include>


<!-- JavaScript-->
<!-- jQuery 1.9.1-->
<script src="http://ajax.useso.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/external/jquery-1.10.1.min.js"><\/script>')</script>
<!-- Migrate -->
<script src="js/external/jquery-migrate-1.2.1.min.js"></script>
<!-- jQuery UI -->
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Bootstrap 3-->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

<!-- Mobile menu -->
<script src="js/jquery.mobile.menu.js"></script>
<!-- Select -->
<script src="js/external/jquery.selectbox-0.2.min.js"></script>
<!-- Swiper slider -->
<script src="js/external/idangerous.swiper.min.js"></script>

<!-- Share buttons -->
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-525fd5e9061e7ef0"></script>

<!--*** Google map  ***-->
<script src="https://maps.google.com/maps/api/js?sensor=true"></script>
<!--*** Google map infobox  ***-->
<script src="js/external/infobox.js"></script>

<!-- Form element -->
<script src="js/external/form-element.js"></script>
<!-- Form validation -->
<script src="js/form.js"></script>

<!-- Custom -->
<script src="js/custom.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        init_Cinema();
    });
</script>
<!--show-->
    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" >
        $(document).ready(
            function(){
            var $cinema__info = $("#cinema__info");
            $.ajax({
                "url":"/servlet/CinemaMes",
                "data":"opr=cinema_info",
                "dataType":"JSON",
                "type":"get",
                "success":function (result) {
                    for(var i = 0;i<result.length;i++){
                        $cinema__info.append($(
                            "<tr><td>"+result[i].address+"</td>"
                            +"<td>"+result[i].phone+"</td>"
                            +"<td>"+result[i].server+"</td>"))
                    }
                }
            })

        })
    </script>
</body>
</html>
